
<template>
  <view @touchend='handleTouchEnd' @touchstart='handleTouchStart'>
    <slot></slot>
  </view>
</template>

<script>
export default {
  data() {
    return {
      time: 0,
      x: 0,
      y: 0
    }
  },
  methods: {
    handleTouchStart(e) {
      this.time = Date.now()
      this.x = e.changedTouches[0].clientX
      this.y = e.changedTouches[0].clientY
    },
    handleTouchEnd(e) {
      if (Date.now - this.time > 2000) return
      const endx = e.changedTouches[0].clientX - this.x
      const endy = e.changedTouches[0].clientY - this.y
      if (Math.abs(endy) - Math.abs(endx) > 0) return
      let direction = ''
      if (Math.abs(endx) > 10) {
        direction = endx > 0 ? 'right' : 'left'
        this.$emit('slide-image', direction)
      }
    }
  }
}
</script>

<style scoped>
</style>